<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 查询参数 -->
          <go2-query v-if="false" :searchParam="searchParam" @on-search="search"></go2-query>
        </a-card>
      </a-col>
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 列表 -->
          <go2-table
            ref="tableRef"
            rowKey="name"
            :fetch="fetch"
            :tableLayout="'fixed'"
            :columns="columns"
            :toolbar="toolbar"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{
              selectedRowKeys: state.selectedRowKeys,
              onChange: onSelectChange,
            }"
          >
            <!-- 继承至 a-table 的默认插槽 -->
          </go2-table>
        </a-card>
      </a-col>
    </a-row>
    <add :visible="state.visibleAdd" @close="closeAdd"></add>
    <edit 
      :visible="state.visibleEdit" 
      @close="closeEdit"
      :record="state.recordEdit"
    ></edit>
    <info
      :visible="state.visibleInfo"
      @close="closeInfo"
      :record="state.recordInfo"
    ></info>
  </page-layout>
</template>

<script>
import { useI18n } from "vue-i18n";
import add from "./modal/add.vue";
import edit from "./modal/edit.vue";
import info from "./modal/info.vue";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { list, remove } from "@/core/api/module/SysConfig";
import { reactive, createVNode, ref, toRaw } from "vue";

const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  components: {
    add,
    edit,
    info,
  },
  setup() {
    const { t } = useI18n();
    const tableRef = ref();

   /// 删除配置
    const removeMethod = (record) => {
       removeIds([record.name])
    }

    //批量删除
    const batchremoveMethod = () => { 
      const romovekeys =  toRaw(state.selectedRowKeys) ;
      if (romovekeys.length<=0) {
        message.error({content:t('please chose'), key: removeBatchKey, duration: 1})
        return false;
      }
       removeIds(romovekeys)
    }

    const removeIds = (Ids) => {
      Modal.confirm({
        title: t('confirm')+t('delete') +'?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: t('ok'),
        cancelText: t('cancel'),
        onOk() {
          message.loading({ content: t('loading'), key: removeKey }); 
          remove({"names":Ids}).then((response) => {
            if(response.code==0){
              message.success({content: t('Delete succeeded!'), key: removeKey, duration: 1}).then(()=> {
                tableRef.value.reload()
              })
            }else{
              message.error({content:response.msg, key: removeKey, duration: 1})
            }
          })
        }
      });
    }
     
   const converFormat = [
      { label: "string", value: 1, tag: { color: "green" } },
      { label: "number", value: 2, tag: { color: "blue" } },
      { label: "string array", value: 3, tag: { color: "green" } },
      { label: "number array", value: 4, tag: { color: "blue" } },
      { label: "string dictionary", value: 5, tag: { color: "green" } },
      { label: "number dictionary", value: 6, tag: { color: "blue" } },
    ];
    /// 列配置
    const columns = [
      { dataIndex: "name", key: "name" },
      { dataIndex: "desc", key: "desc" },
      { dataIndex: "group", key: "group" },
      { dataIndex: "type", key: "type" ,conver:converFormat}, 
      { dataIndex: "create_time", key: "create_time",format: { type: "date", value: "YYYY-MM-DD HH:mm:ss" } }, 
    ];

    /// 数据来源
    const fetch = async (param) => {
      const response = await list(param);
      return response;
    };

    /// 工具栏
    const toolbar = [
      {
        label: "add",
        code: "/config/add",
        event: function () {
          state.visibleAdd = true;
        },
      },
      {
        label: "batchRemove",
        code: "/config/remove",
        event: batchremoveMethod,
      },
    ];

    /// 行操作
    const operate = [ 
      {
        label: "edit",
        code: "/config/edit",
        event: function (record) {
          (state.visibleEdit = true), (state.recordEdit = record);
        },
      },
      {
        label: "remove",
        code: "/config/remove",
        event: function (record) {
          removeMethod(record);
        },
      },
    ];
 
     /// 分页参数
    const pagination = reactive({
      pageSize: 20,
      page: 1,
    });

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleAdd: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
    });

    /// 查询参数
    const searchParam = [
      { key: "name", type: "input", label: "name" },
      { key: "desc", type: "input", label: "desc" },
      { key: "group", type: "input", label: "group" },
    ];

    /// 查询操作
    const search = function (value) {
      state.param = value;
      if (pagination) {
        pagination.current = 1;
      }
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeAdd = function (e) {
      state.visibleAdd = false;
      if (e) {
        tableRef.value.reload();
      }
    };

    const closeEdit = function (e) {
      state.visibleEdit = false;
      if (e) {
        tableRef.value.reload();
      }
    };

    const closeInfo = function (e) {
      state.visibleInfo = false;
      if (e) {
        tableRef.value.reload();
      }
    };

    return {
      t,
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,
      closeAdd,
      closeEdit,
      closeInfo,
      tableRef,
    };
  },
};
</script>